/**
 * @description 列表页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Input } from 'antd';


import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import { UpdateContext } from '@/store/updateContext';

import { copyTemplate, pasteTemplate, copyBlock, pasteBlock } from '@/utils/clipboard';
import { iconTextReg } from '@/utils/Const';
import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';
import AttrExtra from './Components/AttrExtra';

function BreadAtrr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // 属性栏右上角按钮事件
  let handleAttrEvent = (eventKey, blockKey, paramKeys, classKey) => {
    switch (eventKey) {

      // 复制模块
      case 'copy':
        copyBlock(actKey, blockKey, paramKeys, classKey, form)
        break;

      // 黏贴模块
      case 'paste':
        pasteBlock(actKey, blockKey, paramKeys, classKey, form, onConfigEvent)
        updateCtx.setUpdateFlag(pre => !pre)
        break;


      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------
  let items = useMemo(() => {

    let items = [
      {
        key: "page",
        label: "盒子",
        children:
          <StyleWrapper form={form} preKeys={['page', 'default']} onStyleChange={() => upateStyleEvent(['page'])} />
      },
      {
        key: "bread",
        label: "面包屑",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'bread', ['bread'], 'bread')} />,
        children:
          <Collapse accordion items={[
            {
              key: 'wrapper',
              label: '总盒子',
              children:
                <StyleWrapper form={form} preKeys={['bread', 'bread_wrapper', 'default']} onStyleChange={() => upateStyleEvent(['bread', 'bread_wrapper'])} />
            },
            {
              key: 'box',
              label: '列表盒子',
              children:
                <StyleWrapper form={form} preKeys={['bread', 'bread_box', 'default']} onStyleChange={() => upateStyleEvent(['bread', 'bread_box'])} />
            },
            {
              key: 'separator',
              label: '分隔符',
              children:
                <>
                  <Form.Item
                    label="文本"
                    name={['bread', 'base', 'text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['bread', 'base', 'text'], e.target.value)}
                    />
                  </Form.Item>

                  <StyleWrapper form={form} preKeys={['bread', 'bread_separator', 'default']} onStyleChange={() => upateStyleEvent(['bread', 'bread_separator'])} />

                </>
            },
            {
              key: 'one',
              label: '一、二级',
              children:
                <StyleWrapper form={form} preKeys={['bread', 'bread_box_1', 'default']} onStyleChange={() => upateStyleEvent(['bread', 'bread_box_1'])} />
            },
            {
              key: 'one-hover',
              label: '一、二级的悬浮',
              children:
                <StyleWrapper form={form} preKeys={['bread', 'bread_box_1', 'hover']} onStyleChange={() => upateStyleEvent(['bread', 'bread_box_1'])} />
            },
            {
              key: 'icon',
              label: '一级图标',
              children:
                <>
                  <Form.Item
                    label="图标"
                    name={['bread', 'base', 'icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['bread', 'base', 'icon'], e.target.value)}
                    />
                  </Form.Item>

                  <StyleWrapper form={form} preKeys={['bread', 'bread_box_1_icon', 'default']} onStyleChange={() => upateStyleEvent(['bread', 'bread_box_1_icon'])} />
                </>
            },
            {
              key: 'two',
              label: '三级',
              children:
                <StyleWrapper form={form} preKeys={['bread', 'bread_box_2', 'default']} onStyleChange={() => upateStyleEvent(['bread', 'bread_box_2'])} />
            },
          ]} />
      },
      {
        key: "return",
        label: "返回按钮",
        children:
          <>
            <Form.Item
              label="文本"
              name={['base', 'return_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'return_text'], e.target.value)}
              />
            </Form.Item>
            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '盒子',
                children:
                  <StyleWrapper form={form} preKeys={['return', 'default']} onStyleChange={() => upateStyleEvent(['return'])} />
              },
              {
                key: 'btn',
                label: '按钮',
                children:
                  <StyleWrapper form={form} preKeys={['return_btn', 'default']} onStyleChange={() => upateStyleEvent(['return_btn'])} />
              },
              {
                key: 'btn-hover',
                label: '按钮-悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['return_btn', 'hover']} onStyleChange={() => upateStyleEvent(['return_btn'])} />
              },
            ]} />
          </>

      },
    ]
    return items
  }, [updateCtx.updateFlag])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='bread'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 8,
        }}
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(BreadAtrr) 